<template>
  <div class="relevant">
    <van-cell title="相关课程(2)" class="cell" />
    <div class="courses">
      <van-config-provider :theme-vars="themeVars">
        <van-card
          v-for="item in homeData.list4"
          :key="item.id"
          :price="formatMoney(item.price)"
          :title="item.title"
          :thumb="homeData.image5"
          :origin-price="399"
        >
          <template #num>
            <span> {{ item.num }} 人正在学习</span>
          </template>
          <template #tags>
            <van-tag plain type="danger" style="margin-top: 2vh"
              >限时优惠</van-tag
            >
          </template>
        </van-card>
      </van-config-provider>
    </div>
    <van-cell title="相关文章(2)" class="cell" />
    <div class="article">
      <van-config-provider :theme-vars="themeVars">
        <van-card
          v-for="item in homeData.list4"
          :key="item.id"
          price="Daisy"
          currency=""
          title="不管怎样，生活还是要继续向前走去。有的时候伤害和失败不见得是一件坏事，它会让你变得更好，孤单和失落亦是如此。"
          desc="不管怎样，生活还是要继续向前走去。有的时候伤害和失败不见得是一件坏事，它会让你变得更好，孤单和失落亦是如此。"
          thumb="http://mms1.baidu.com/it/u=1437282915,3236231214&fm=253&app=120&f=JPEG&fmt=auto&q=75?w=462&h=260"
        >
          <template #footer>
            <van-icon name="eye-o" size="18" />
            <span> 30367</span>
          </template>
        </van-card>
      </van-config-provider>
    </div>
    <van-divider
      :style="{ color: '#cccccc', borderColor: '#cccccc', padding: '0 16px' }"
    >
      我是有底线的
    </van-divider>
  </div>
</template>

<script>
import { Cell, CellGroup, Divider } from 'vant'
import axios from 'axios'

export default {
  name: 'Relevant',
  data() {
    return {
      homeData: {},
      active: 0,
      themeVars: {
        // cardThumbSize: "18vh",
        carTextSize: '2vh',
        // cardPriceColor: "#ffc71c",
        cardTitleFontSize: '2vh',
        cardBackgroundColor: '#fff',
        // navBarTitleFontWeight: "bolder",
      },
    }
  },
  components: {
    Divider,
  },
  created() {
    axios
      .get('/mock/api/home/list')
      .then((mockData) => {
        this.homeData = mockData.data.data
      })
      .catch(console.error)
  },

  methods: {
    formatMoney(val) {
      return Number(val).toFixed(1)
    },
  },

  components: {
    Cell,
    CellGroup,
  },
}
</script>

<style lang="less" scoped>
@import '@/style/index.less';
:deep(.courses .van-card__title) {
  font-size: 14px;
  font-weight: bolder;
}
:deep(.courses .van-card__price) {
  color: #ffc71c;
}
:deep(.article .van-card__price) {
  color: #888;
}

.article {
  white-space: wrap;
  text-overflow: clip;
  overflow: visible;
}
</style>
